<template>
  <div class="birthday-page">
    <!-- 背景粒子 -->
    <div id="particles-js-birthday" class="particles"></div>
    
    <!-- 返回按钮 -->
    <router-link to="/" class="back-btn">
      <span>← 返回</span>
    </router-link>
    
    <!-- 主要内容 -->
    <div class="birthday-content">
      <div class="birthday-header" data-aos="fade-down" data-aos-duration="2000">
        <h1 class="birthday-title">🎂 生日信息</h1>
        <p class="birthday-subtitle">记录我们生命中的重要时刻</p>
      </div>
      
      <!-- 生日卡片 -->
      <div class="birthday-cards" data-aos="fade-up" data-aos-delay="500">
        <div class="birthday-card boy-card" data-aos="slide-in-left" data-aos-delay="700">
          <div class="card-header">
            <div class="avatar">👨</div>
            <h2>{{ loveConfig.boy.name }}</h2>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="label">生日：</span>
              <span class="value">{{ loveConfig.boy?.birthday ? loveUtils.formatDate(loveConfig.boy.birthday) : '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">年龄：</span>
              <span class="value">{{ loveConfig.boy?.age || 0 }}岁</span>
            </div>
            <div class="info-item">
              <span class="label">星座：</span>
              <span class="value">{{ loveConfig.boy?.zodiac || '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">距离下次生日：</span>
              <span class="value countdown">{{ daysToBoyBirthday }}天</span>
            </div>
          </div>
          <div class="zodiac-traits">
            <h3>性格特点</h3>
            <div class="traits">
              <span v-for="trait in (loveConfig?.zodiac?.traits?.boy || [])" :key="trait" class="trait">{{ trait }}</span>
            </div>
          </div>
        </div>
        
        <div class="love-symbol">💕</div>
        
        <div class="birthday-card girl-card" data-aos="slide-in-right" data-aos-delay="900">
          <div class="card-header">
            <div class="avatar">👩</div>
            <h2>{{ loveConfig.girl.name }}</h2>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="label">生日：</span>
              <span class="value">{{ loveConfig.girl?.birthday ? loveUtils.formatDate(loveConfig.girl.birthday) : '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">年龄：</span>
              <span class="value">{{ loveConfig.girl?.age || 0 }}岁</span>
            </div>
            <div class="info-item">
              <span class="label">星座：</span>
              <span class="value">{{ loveConfig.girl?.zodiac || '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="label">距离下次生日：</span>
              <span class="value countdown">{{ daysToGirlBirthday }}天</span>
            </div>
          </div>
          <div class="zodiac-traits">
            <h3>性格特点</h3>
            <div class="traits">
              <span v-for="trait in (loveConfig?.zodiac?.traits?.girl || [])" :key="trait" class="trait">{{ trait }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 星座匹配详情 -->
      <div class="zodiac-details" data-aos="fade-up" data-aos-delay="1100">
        <h2 class="section-title">🌟 星座匹配详情</h2>
        <div class="compatibility-section">
          <div class="compatibility-score">
            <div class="score-circle">
              <span class="score-number">{{ loveConfig?.zodiac?.compatibility || 0 }}%</span>
              <span class="score-label">匹配度</span>
            </div>
          </div>
          <div class="compatibility-info">
            <h3>{{ loveConfig?.boy?.zodiac || '未知' }} + {{ loveConfig?.girl?.zodiac || '未知' }}</h3>
            <p>{{ loveConfig?.zodiac?.description || '星座匹配信息' }}</p>
            <div class="compatibility-bar">
              <div class="bar-fill" :style="{ width: (loveConfig?.zodiac?.compatibility || 0) + '%' }"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 生日倒计时 -->
      <div class="birthday-countdown" data-aos="fade-up" data-aos-delay="1300">
        <h2 class="section-title">⏰ 生日倒计时</h2>
        <div class="countdown-cards">
          <div class="countdown-card" v-if="nextBirthdayPerson">
            <div class="countdown-avatar">{{ nextBirthdayPerson === 'boy' ? '👨' : '👩' }}</div>
            <h3>{{ nextBirthdayPerson === 'boy' ? loveConfig.boy.name : loveConfig.girl.name }}的生日</h3>
            <div class="countdown-timer">
              <div class="time-unit">
                <span class="time-number">{{ countdownDays }}</span>
                <span class="time-label">天</span>
              </div>
              <div class="time-unit">
                <span class="time-number">{{ countdownHours }}</span>
                <span class="time-label">时</span>
              </div>
              <div class="time-unit">
                <span class="time-number">{{ countdownMinutes }}</span>
                <span class="time-label">分</span>
              </div>
              <div class="time-unit">
                <span class="time-number">{{ countdownSeconds }}</span>
                <span class="time-label">秒</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 生日祝福 -->
      <div class="birthday-wishes" data-aos="fade-up" data-aos-delay="1500">
        <h2 class="section-title">💝 生日祝福</h2>
        <div class="wishes-content">
          <div class="wish-card" v-for="(wish, index) in birthdayWishes" :key="index">
            <div class="wish-icon">{{ wish.icon }}</div>
            <h3>{{ wish.title }}</h3>
            <p>{{ wish.message }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { initParticles } from '../utils/particles.js'
import { loveConfig, loveUtils } from '../config/love-config.js'

export default {
  name: 'Birthday',
  setup() {
    const daysToBoyBirthday = ref(0)
    const daysToGirlBirthday = ref(0)
    const nextBirthdayPerson = ref('')
    const countdownDays = ref(0)
    const countdownHours = ref(0)
    const countdownMinutes = ref(0)
    const countdownSeconds = ref(0)
    
    let countdownInterval = null
    
    const birthdayWishes = [
      {
        icon: '🎂',
        title: '生日快乐',
        message: '愿你的生日充满欢乐和温馨，愿你的每一天都像生日一样美好！'
      },
      {
        icon: '🌟',
        title: '心想事成',
        message: '愿你的所有梦想都能实现，愿你的未来充满无限可能！'
      },
      {
        icon: '💕',
        title: '爱情甜蜜',
        message: '愿我们的爱情越来越甜蜜，愿我们永远相爱相守！'
      },
      {
        icon: '🎁',
        title: '惊喜不断',
        message: '愿你的生活充满惊喜和美好，愿每一天都是新的开始！'
      }
    ]
    
    const updateBirthdayCountdown = () => {
      if (!loveConfig?.boy?.birthday || !loveConfig?.girl?.birthday) {
        return
      }
      
      daysToBoyBirthday.value = loveUtils.getDaysToBirthday(loveConfig.boy.birthday)
      daysToGirlBirthday.value = loveUtils.getDaysToBirthday(loveConfig.girl.birthday)
      
      // 确定下一个生日是谁
      if (daysToBoyBirthday.value <= daysToGirlBirthday.value) {
        nextBirthdayPerson.value = 'boy'
      } else {
        nextBirthdayPerson.value = 'girl'
      }
      
      // 计算精确倒计时
      const nextBirthday = nextBirthdayPerson.value === 'boy' 
        ? new Date(loveConfig.boy.birthday) 
        : new Date(loveConfig.girl.birthday)
      
      const now = new Date()
      nextBirthday.setFullYear(now.getFullYear())
      
      if (nextBirthday < now) {
        nextBirthday.setFullYear(now.getFullYear() + 1)
      }
      
      const diff = nextBirthday - now
      
      countdownDays.value = Math.floor(diff / (1000 * 60 * 60 * 24))
      countdownHours.value = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      countdownMinutes.value = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
      countdownSeconds.value = Math.floor((diff % (1000 * 60)) / 1000)
    }
    
    onMounted(() => {
      // 初始化粒子效果
      initParticles('particles-js-birthday')
      
      // 更新生日倒计时
      updateBirthdayCountdown()
      
      // 启动倒计时定时器
      countdownInterval = setInterval(updateBirthdayCountdown, 1000)
    })
    
    onUnmounted(() => {
      if (countdownInterval) {
        clearInterval(countdownInterval)
      }
    })
    
    return {
      loveConfig,
      loveUtils,
      daysToBoyBirthday,
      daysToGirlBirthday,
      nextBirthdayPerson,
      countdownDays,
      countdownHours,
      countdownMinutes,
      countdownSeconds,
      birthdayWishes
    }
  }
}
</script>

<style scoped>
.birthday-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
  padding: 2rem;
}

.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 100;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-5px);
}

.birthday-content {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 4rem;
}

.birthday-header {
  text-align: center;
  margin-bottom: 4rem;
}

.birthday-title {
  font-size: 3rem;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.birthday-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
}

/* 生日卡片样式 */
.birthday-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-bottom: 4rem;
}

.birthday-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 300px;
  transition: all 0.3s ease;
}

.birthday-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.15);
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.avatar {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.card-header h2 {
  color: white;
  font-size: 1.8rem;
  font-family: 'LoveFont', cursive;
}

.card-body {
  margin-bottom: 2rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

.value {
  color: white;
  font-weight: bold;
  font-size: 1rem;
}

.countdown {
  color: #ff6b9d;
  font-weight: bold;
}

.zodiac-traits h3 {
  color: white;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.trait {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.9rem;
}

.love-symbol {
  font-size: 4rem;
  animation: heartBeat 1.5s ease-in-out infinite;
}

/* 星座匹配详情 */
.zodiac-details {
  margin-bottom: 4rem;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.compatibility-section {
  display: flex;
  align-items: center;
  gap: 3rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.compatibility-score {
  flex-shrink: 0;
}

.score-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b9d, #4ecdc4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.score-number {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.score-label {
  font-size: 1rem;
}

.compatibility-info {
  flex: 1;
}

.compatibility-info h3 {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.compatibility-info p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.compatibility-bar {
  width: 100%;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(45deg, #ff6b9d, #4ecdc4);
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

/* 生日倒计时 */
.birthday-countdown {
  margin-bottom: 4rem;
}

.countdown-cards {
  display: flex;
  justify-content: center;
}

.countdown-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 400px;
}

.countdown-avatar {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.countdown-card h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  font-family: 'LoveFont', cursive;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.time-unit {
  text-align: center;
}

.time-number {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
  color: #ff6b9d;
  margin-bottom: 0.5rem;
}

.time-label {
  color: white;
  font-size: 1rem;
}

/* 生日祝福 */
.birthday-wishes {
  margin-bottom: 2rem;
}

.wishes-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.wish-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.wish-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.wish-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.wish-card h3 {
  color: white;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.wish-card p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .birthday-page {
    padding: 1rem;
  }
  
  .birthday-title {
    font-size: 2rem;
  }
  
  .birthday-cards {
    flex-direction: column;
    gap: 2rem;
  }
  
  .birthday-card {
    min-width: 250px;
  }
  
  .compatibility-section {
    flex-direction: column;
    text-align: center;
  }
  
  .countdown-timer {
    gap: 1rem;
  }
  
  .time-number {
    font-size: 2rem;
  }
  
  .wishes-content {
    grid-template-columns: 1fr;
  }
}
</style>
